<template>
  <!-- <v-container class="d-flex justify-space-around align-center">
    <v-hover
      v-slot="{ hover }"
      open-delay="200"
      v-for="card in cards"
      :key="card.title"
    >
      <v-card
        :elevation="hover ? 16 : 2"
        height="400px"
        width="300px"
        :href="card.link"
        :class="{ 'on-hover': hover }"
        target="blank"
      >
        <v-card-title v-text="card.title" class="text-h5"></v-card-title>
        <v-img
          :src="`${getPath}/${card.src}`"
          position="center center"
          height="250px"
          alt="logo"
          class="bg"
          contain
        >
        </v-img>
        <v-card-text v-text="card.description"></v-card-text>
      </v-card>
    </v-hover>
  </v-container> -->

  <v-container class="d-flex align-center" height="100%">
    <!-- <h3>{{ albumName }}</h3> -->
    <v-row width="100%">
      <v-col cols="12" class="d-flex justify-space-around flex-wrap ma-4">
        <v-hover v-for="card in cards" :key="card.title" v-slot="{ hover }">
          <v-card
            :elevation="hover ? 12 : 2"
            class="d-flex flex-column align-center pa-2 ma-4"
            :href="card.link"
            height="44vh"
            width="15vw"
            target="blank"
          >
            <v-card-title class="text-h5">{{ card.title }}</v-card-title>

            <v-img
              :src="`${getPath}/${card.src}`"
              height="30vh"
              width="13vw"
              position="center center"
              alt="logo"
              :class="{ 'on-hover': hover }"
              class="mb-3"
              contain
            >
            </v-img>

            <h5 v-text="card.description"></h5>
          </v-card>
        </v-hover>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  data: () => ({
    cols: "auto",
    cards: [],
  }),
  computed: {
    ...mapGetters(["getSitesLinks", "getPath"]),
  },
  methods: {
    onGetSitesLinks() {
      this.cards = this.getSitesLinks;
    },
  },
  mounted() {
    this.onGetSitesLinks();
  },
};
</script>

<style lang="sass"></style>
